<script lang="ts" setup>
import { ref } from 'vue'
// 订单列表组件
import OrderList from './components/order_list.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOrderListAPI } from '@/apis/order_list'
import type { ConsultOrderListRow } from '@/types/order_list'
import type { UniLoadMoreStatus } from '@uni-helper/uni-ui-types'
// 标签索引值
const tabIndex = ref(0)
// 标签页数据
const orderTabs = ref([
  { label: '问医生', isFlag: true },
  { label: '极速问诊', isFlag: false },
  { label: '开药问诊', isFlag: false },
])
// 标签页切换
const handleTabChange = (index: number) => {
  tabIndex.value = index
  orderTabs.value[index].isFlag = true
  getOrderList()
}
const params = ref({
  current: 1,
  pageSize: 5,
})
// 订单列表
const orderList = ref<ConsultOrderListRow[]>([])
const totalPage = ref(0)
// 获取订单列表
const getOrderList = async () => {
  // console.log('getOrderList', params.value)
  const res = await getOrderListAPI({ ...params.value, type: tabIndex.value + 1 })
  orderList.value = [...orderList.value, ...res.data.rows]
  totalPage.value = res.data.total
  if (orderList.value.length === 0) {
    status.value = 'noMore'
    return uni.showToast({ title: '暂无数据', icon: 'none' })
  }
}
onLoad(() => {
  getOrderList()
})
const status = ref<UniLoadMoreStatus>('loading')
// 下拉刷新状态
const refresherTriggered = ref(false)
const handleRefresh = async () => {
  refresherTriggered.value = true
  params.value.current = 1
  orderList.value = []
  await getOrderList()
  refresherTriggered.value = false
}
// 上拉加载
const handleScrollToLower = async () => {
  if (orderList.value.length < totalPage.value) {
    params.value.current++
    await getOrderList()
  } else {
    return uni.showToast({ title: '暂无数据', icon: 'none' })
  }
}
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <custom-tab :data="orderTabs" @change="handleTabChange"></custom-tab>
    </view>
    <!-- 订单列表 -->
    <view class="consult-order-list" v-for="(tab, index) in orderTabs" :key="tab.label">
      <view class="consult-order-list-title" v-show="tabIndex === index">{{ tab.label }}</view>
      <OrderList
        v-show="tabIndex === index"
        v-if="tab.isFlag"
        :order-list="orderList"
        v-model:status="status"
        @scrolltolower="handleScrollToLower"
        @refresh="handleRefresh"
        :refresher-triggered="refresherTriggered"
      />
    </view>
  </view>
</template>

<style lang="scss"></style>
